<div>
  <div class="col-md-4 position-r">
    <div class="group-title">请先选择属性分类</div>
    <div class="group-item">
      <ul class="list-unstyled">
        <li *ngFor="let item of classifyList" [ngClass]="{'active': classifyId === item.id}" (click)="chosedClassify(item.id)">{{item.name}}
      </ul>
    </div>
    <i class="iconfont icon-right"></i>
  </div>
  <div class="col-md-4 position-r">
    <div class="group-title">属性名称
      <input type="text" class="form-control" name="attr" [(ngModel)]="attr">
      <button class="btn btn-default" (click)="addAttr()">增加</button>
    </div>
    <div class="group-item">
      <ul class="list-unstyled">
        <li *ngFor="let item of attrList" [ngClass]="{'active': attrId === item.id}" (click)="chosedAttr(item.id)">{{item.name}}
          <span class="pull-right">
            <i class="iconfont icon-edit" (click)="editAttrDialog(item.id,item.name,item.goods_attribute_category_id)"></i>
            <i class="iconfont icon-remove" (click)="delAttr(item.id)"></i>
          </span>
        </li>
      </ul>
    </div>
    <i class="iconfont icon-right"></i>
  </div>
  <div class="col-md-4">
    <div class="group-title">属性值
      <input type="text" class="form-control" name="attrVal" [(ngModel)]="attrVal">
      <button class="btn btn-default" (click)="addAttrVal()">增加</button>
    </div>
    <div class="group-item">
      <ul class="list-unstyled">
        <li *ngFor="let item of attrValList" [ngClass]="{'active': attrValId === item.id}" (click)="chosedAttrVal(item.id)">{{item.value}}
          <span class="pull-right">
            <i class="iconfont icon-edit" (click)="editAttrValDialog(item.id,item.value)"></i>
            <i class="iconfont icon-remove" (click)="delValModal.show();"></i>
          </span>
        </li>
      </ul>
    </div>
  </div>
</div>

<app-notification [type]="type" [message]="message" [isShow]="isShow" (promptIsShow)="promptIsShow($event)"></app-notification>

<!-- 编辑属性名 -->
<div class="modal fade" bsModal #editModal="bs-modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">编辑属性名</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="editModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group clearfix">
            <label class="col-md-2">属性名</label>
            <div class="col-md-6">
              <input type="text" class="form-control" name="editAttr" [(ngModel)]="editAttr">
            </div>
          </div>
          <div class="text-center mt20">
            <button class="btn btn-default btn-md-long" type="button" (click)="editModal.hide()">取消</button>
            <button class="btn btn-success btn-md-long" type="submit" (click)="editAttrSubmit()">确定</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<!-- 编辑属性值 -->
<div class="modal fade" bsModal #editValModal="bs-modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">编辑属性值</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="editValModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group clearfix">
          <label class="col-md-2">属性值</label>
          <div class="col-md-6">
            <input type="text" class="form-control" name="editAttr" [(ngModel)]="editAttrVal">
          </div>
        </div>
        <div class="text-center mt20">
          <button class="btn btn-default btn-md-long" type="button" (click)="editValModal.hide()">取消</button>
          <button class="btn btn-success btn-md-long" type="submit" (click)="editAttrValSubmit()">确定</button>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 是否确认删除弹框  属性名 -->
<div class="modal fade" bsModal #delModal="bs-modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">提示</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="delModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body text-center">
        是否确认删除
      </div>
      <div class="modal-footer mt20">
        <button class="btn btn-default btn-md-long" type="button" (click)="delModal.hide()">取消</button>
        <button class="btn btn-success btn-md-long" type="submit" (click)="delAttrSubmit()">确定</button>
      </div>
    </div>
  </div>
</div>
<!-- 是否确认删除弹框  属性值 -->
<div class="modal fade" bsModal #delValModal="bs-modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">提示</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="delValModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body text-center">
        是否确认删除
      </div>
      <div class="modal-footer mt20">
        <button class="btn btn-default btn-md-long" type="button" (click)="delValModal.hide()">取消</button>
        <button class="btn btn-success btn-md-long" type="submit" (click)="delAttrValSubmit()">确定</button>
      </div>
    </div>
  </div>
</div>
